<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from "vue-router"
import { showToast } from "vant"
import { getProductDetailApi, updateProductStockApi } from '../api/products'
import { getCartItemsApi, addToCartApi } from '../api/cart'

// 商品信息
const product = ref({})

// 数量
const quantity = ref(1)

const router = useRouter()
const route = useRoute()

const onClickLeft = () => {
  router.push("/");
};

// 保存浏览记录
const saveBrowsingHistory = () => {
  if (!product.value.id) return;

  // 从 localStorage 获取现有的浏览记录
  let history = localStorage.getItem('browsingHistory');
  history = history ? JSON.parse(history) : [];

  // 创建新的浏览记录项
  const newItem = {
    id: product.value.id,
    title: product.value.name,
    price: product.value.price,
    image: product.value.image_url || product.value.image,
    path: `/product/${product.value.id}`,
    timestamp: Date.now()
  };

  // 检查是否已存在相同的商品记录
  const existingIndex = history.findIndex(item => item.id === product.value.id);
  if (existingIndex !== -1) {
    // 如果存在，更新时间戳并移到顶部
    history.splice(existingIndex, 1);
  }

  // 添加到顶部
  history.unshift(newItem);

  // 限制最多保存50条记录
  if (history.length > 50) {
    history = history.slice(0, 50);
  }

  // 保存到 localStorage
  localStorage.setItem('browsingHistory', JSON.stringify(history));
};

// 获取商品详情
const getProductDetail = async () => {
  try {
    console.log('正在获取商品详情，商品ID:', route.params.id)

    // 检查ID是否有效
    if (!route.params.id) {
      throw new Error('商品ID无效')
    }

    const res = await getProductDetailApi(route.params.id)
    console.log('商品详情响应:', res)

    // 检查响应格式
    if (!res) {
      throw new Error('服务器无响应')
    }

    if (res.success) {
      product.value = res.data
      console.log('商品详情获取成功:', res.data)

      // 保存浏览记录
      saveBrowsingHistory();
    } else {
      const errorMsg = '获取商品详情失败: ' + (res.message || '未知错误')
      console.error(errorMsg)
      showToast(errorMsg)
      setTimeout(() => {
        router.push('/')
      }, 1500)
    }
  } catch (error) {
    console.error('获取商品详情出错:', error)
    console.error('错误详情:', {
      message: error.message,
      stack: error.stack,
      name: error.name
    })

    let errorMsg = '获取商品详情失败'
    if (error.response) {
      // 服务器响应了错误状态码
      console.error('服务器响应错误:', error.response)
      errorMsg += `: ${error.response.status} ${error.response.statusText}`
    } else if (error.request) {
      // 请求已发出但没有收到响应
      console.error('网络请求错误:', error.request)
      errorMsg += ': 网络连接失败，请检查服务器是否运行'
    } else {
      // 其他错误
      errorMsg += `: ${error.message}`
    }

    showToast(errorMsg)
    setTimeout(() => {
      router.push('/')
    }, 1500)
  }
}

// 增加数量
const increaseQuantity = () => {
  if (quantity.value < (product.value.stock || 999)) {
    quantity.value++
  } else {
    showToast(`最多只能购买${product.value.stock || 999}件`)
  }
}

// 减少数量
const decreaseQuantity = () => {
  if (quantity.value > 1) {
    quantity.value--
  }
}

// 添加到购物车
const addToCart = async () => {
  if (!product.value.id) {
    showToast('商品信息加载中...')
    return
  }

  // 检查库存是否足够（仅检查，不扣减）
  if (quantity.value > (product.value.stock || 999)) {
    showToast('库存不足')
    return
  }

  try {
    // 获取商品的当前库存
    const productRes = await getProductDetailApi(product.value.id)
    if (productRes.success) {
      const currentStock = productRes.data.stock

      // 检查库存是否足够
      if (quantity.value > currentStock) {
        showToast('库存不足')
        return
      }

      // 减少库存
      await updateProductStockApi(product.value.id, currentStock - quantity.value)
    }
  } catch (error) {
    console.error('更新库存失败:', error)
    showToast('操作失败')
    return
  }

  // 获取本地存储的购物车数据
  const cart = JSON.parse(localStorage.getItem('cartItems') || '[]')

  // 检查商品是否已存在
  const existingItemIndex = cart.findIndex(item => item.id === product.value.id)

  if (existingItemIndex > -1) {
    // 检查添加后的总数量是否超过库存
    const totalQuantity = cart[existingItemIndex].num + quantity.value
    if (totalQuantity > (product.value.stock || 999)) {
      showToast('库存不足')
      return
    }
    // 如果商品已存在，增加数量
    cart[existingItemIndex].num += quantity.value
  } else {
    // 如果商品不存在，添加新商品
    const newItem = {
      id: product.value.id,
      title: product.value.name,
      price: parseFloat(product.value.price),
      thumb: product.value.image_url || product.value.image,
      num: quantity.value,
      desc: product.value.description,
      checked: true
    }
    cart.push(newItem)
  }

  // 保存到本地存储
  localStorage.setItem('cartItems', JSON.stringify(cart))

  showToast(`成功添加${quantity.value}件商品到购物车`)
}

// 立即购买
const buyNow = async () => {
  if (!product.value.id) {
    showToast('商品信息加载中...')
    return
  }

  // 检查库存是否足够（仅检查，不扣减）
  if (quantity.value > (product.value.stock || 999)) {
    showToast('库存不足')
    return
  }

  // 获取当前购物车数据
  let cart = JSON.parse(localStorage.getItem('cartItems') || '[]')

  // 查找是否已存在该商品
  const existingItemIndex = cart.findIndex(item => item.id === product.value.id)

  if (existingItemIndex > -1) {
    // 检查总数量是否超过库存
    if (quantity.value > (product.value.stock || 999)) {
      showToast('库存不足')
      return
    }
    // 如果商品已存在，更新数量和选中状态
    cart[existingItemIndex].num = quantity.value
    cart[existingItemIndex].checked = true
  } else {
    // 如果商品不存在，添加新商品
    const newItem = {
      id: product.value.id,
      title: product.value.name,
      price: parseFloat(product.value.price),
      thumb: product.value.image_url || product.value.image,
      num: quantity.value,
      desc: product.value.description,
      checked: true
    }
    cart = [newItem]
  }

  // 保存到本地存储
  localStorage.setItem('cartItems', JSON.stringify(cart))

  // 跳转到支付页面
  router.push("/pay")
}

// 跳转到购物车
const goToCart = () => {
  router.push("/cart")
}

// 组件挂载时获取商品详情
onMounted(() => {
  if (!route.params.id) {
    showToast('商品ID无效')
    router.push('/')
    return
  }
  getProductDetail()
})
</script>

<template>
  <div class="product-detail-wrapper">
    <van-nav-bar title="商品详情" left-text="返回首页" left-arrow @click-left="onClickLeft" />

    <div class="content" v-if="product.id">
      <van-image
        class="image"
        fit="contain"
        :src="product.image_url || product.image"
        :alt="product.name"
      />
      <div class="product-info">
        <span class="price">¥{{ product.price }}</span>
        <h1 class="description">{{ product.name }}</h1>
        <h3 class="desc">{{ product.description }}</h3>
        <div class="stock">
          <span v-if="product.sales">销量{{ product.sales }}+</span>
          <span v-if="product.stock">库存{{ product.stock }}</span>
        </div>

        <!-- 数量选择器 -->
        <div class="quantity-selector">
          <span class="quantity-label">数量:</span>
          <div class="quantity-control">
            <van-button
              square
              size="small"
              text="-"
              @click="decreaseQuantity"
              :disabled="quantity <= 1"
            />
            <span class="quantity">{{ quantity }}</span>
            <van-button
              square
              size="small"
              text="+"
              @click="increaseQuantity"
            />
          </div>
        </div>
      </div>

      <div class="product-detail">
        <h2>商品详情</h2>
        <p>{{ product.detail || product.description }}</p>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-else class="loading-container">
      <van-loading size="24px" vertical>加载中...</van-loading>
    </div>

    <van-action-bar>
      <van-action-bar-icon icon="cart-o" text="购物车" @click="goToCart" />
      <van-action-bar-button type="warning" text="加入购物车" @click="addToCart" />
      <van-action-bar-button type="danger" text="立即购买" @click="buyNow" />
    </van-action-bar>
  </div>
</template>

<style lang="scss" scoped>
.product-detail-wrapper {
  padding-bottom: 50px; // 为action bar预留空间
  background-color: var(--van-background);
}

.content {
  padding-bottom: 20px; // 额外的底部内边距
  background-color: var(--van-background);
}

.image {
  width: 100%;
  padding: 10px;
  background-color: var(--van-background);
}

.product-info {
  padding: 0 10px;
}

.price {
  color: rgb(62, 190, 222);
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 10px;
}

.description {
  font-size: 20px;
  margin-bottom: 10px;
  color: var(--van-text-color);
}

.desc {
  font-size: 15px;
  color: var(--van-text-color-2);
  margin-bottom: 15px;
}

.stock {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  color: var(--van-text-color-3);
  border-top: 1px solid var(--van-border-color);
  border-bottom: 1px solid var(--van-border-color);
}

.quantity-selector {
  display: flex;
  align-items: center;
  padding: 15px 0;

  .quantity-label {
    margin-right: 15px;
    font-size: 16px;
    color: var(--van-text-color);
  }

  .quantity-control {
    display: flex;
    align-items: center;

    .quantity {
      min-width: 40px;
      text-align: center;
      font-size: 16px;
      margin: 0 5px;
      color: var(--van-text-color);
    }

    :deep(.van-button) {
      width: 30px;
      height: 30px;
      font-size: 18px;
    }
  }
}

.product-detail {
  padding: 10px;
  margin-top: 20px;
  background-color: var(--van-background-2);

  h2 {
    font-size: 18px;
    margin-bottom: 10px;
    color: var(--van-text-color);
  }

  p {
    font-size: 15px;
    color: var(--van-text-color-2);
    line-height: 1.6;
  }
}

:deep(.van-action-bar) {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--van-background-2);
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}
</style>